<template></template>

<script setup name="Heatmap">
import { onMounted } from "vue";
import * as lcjs from "@lightningchart/lcjs";
import { createWaterDropDataGenerator } from "@lightningchart/xydata";

const {
  lightningChart,
  PalettedFill,
  LUT,
  regularColorSteps,
  emptyLine,
  Themes,
} = lcjs;

const resolutionX = 1000;
const resolutionY = 1000;

onMounted(() => {
  const chart = lightningChart({
    license:
      "0002-n96ucKX1C700BOZwz7IAGHHjEuT4KwDfrkmx7QCyIBztfxcK2B2YdzqRkuyh0bv4JWu/viN/aCm4HYmBbVnGHphV-MEUCIQCoAbM5nVG3lu6EAeoZcsrvewNpdn+DEGKL6UpNeDXEbAIgCV8gVBAZ3XKPAkbuQDarCfg/BnBK4sN+L00cqoYMu5E=",
    licenseInformation: {
      appTitle: "LightningChart JS Trial",
      company: "LightningChart Ltd.",
    },
  })
    .ChartXY({
      theme: Themes.darkGold,
    })
    .setTitle(
      `Heatmap Grid Series ${resolutionX}x${resolutionY} (${(
        (resolutionX * resolutionY) /
        1000000
      ).toFixed(1)} million data points)`
    )
    .setPadding({ right: 40 });

  const theme = chart.getTheme();
  const palette = new LUT({
    units: "°C",
    percentageValues: true,
    steps: regularColorSteps(0, 0.7, theme.examples.intensityColorPalette),
    interpolate: false,
  });

  createWaterDropDataGenerator()
    .setRows(resolutionY) // Corrected to match the rows and columns correctly
    .setColumns(resolutionX)
    .generate()
    .then((data) => {
      const heatmap = chart
        .addHeatmapGridSeries({
          columns: resolutionX,
          rows: resolutionY,
          dataOrder: "columns",
        })
        .setStart({ x: 0, y: 0 })
        .setEnd({ x: resolutionX, y: resolutionY })
        .setFillStyle(new PalettedFill({ lut: palette }))
        .setWireframeStyle(emptyLine)
        .invalidateIntensityValues(data);

      chart
        .addLegendBox()
        .setAutoDispose({
          type: "max-width",
          maxWidth: 0.3,
        })
        .add(heatmap); // Corrected to add the heatmap instead of the chart
    });
});
</script>
